<html>
<head>
    <meta charset="UTF-8">
    <style>
        table
        {
            border-collapse:collapse;
        }
        th, td
        {
            border: 1px solid #000000;
            height: 40px;
            padding: 15px;
        }
    </style>
</head>
<body>
<div id="banner"></div>
<center>
<table id="jobDetail">

</table>
</center>
<script src="js/libs/jquery.js"></script>
<script src="js/common.js"></script>

<script>
    let jobId = window.location.href.split('jobId=')[1];

    console.log(jobId);

    $.get(`/api/jobDetail?jobId=${jobId}`, (resp) => {
        let job = resp.data;
        console.log(job);
        html = `
            <tr><th>职位</th><td>${job.title}</td></tr>
            <tr><th>职位描述</th><td><pre>${job.description}</pre></td></tr>
            <tr><th>工作地点</th><td>${job.location}</td></tr>
            <tr><th>薪水</th><td>${job.salary}</td></tr>
            <tr><th colspan="2">
                <button id="sendCV" data-cv-id="12345" data-job-id="${jobId}">投递简历</button>
                <button id="jobCollect" data-job-id="${jobId}">添加收藏</button>
             </th></tr>

        `;

        $("#jobDetail").html(html);

        $("#jobDetail #jobCollect").click((e) => {
            let jobId = $(e.target).data('job-id');
            $.get(`/api/jobCollect?jobId=${jobId}`, (resp) => {
                alert(resp.message);
            });
        });

        $("#jobDetail #sendCV").click((e) => {
            let jobId = $(e.target).data('job-id');
            let cvId = $(e.target).data('cv-id');

            $.get(`/api/sendCV?jobId=${jobId}&cvId=${cvId}`, (resp) => {
                alert(resp.message);
            });
        });
    });
</script>
</body>
</html>